<template>
    <div id="ticketReal">
        <div class="t_content">
            <div class="t_logo"><img class="yz" :src="imgZL"/></div>
            <div class="t_header">{{ ticktype | invoiceTypeFilter}}</div>
            <div class="detailSection">
                <div>
                    <span>发票类型：</span>
                    <span>{{ tickinfo.invoiceTypeCode | invoiceTypeFilter}}</span>
                </div>
                <div>
                    <span>发票号码：</span>
                    <span>{{ tickinfo.electronicTicketNumber}}</span>
                </div>
                <div>
                    <span>开票日期：</span>
                    <span>{{ tickinfo.invoiceDate}}</span>
                </div>
                <div>
                    <span>乘坐人：</span>
                    <span>{{ tickinfo.passenger}}</span>
                </div>
                <div>
                    <span>证件号：</span>
                    <span>{{ tickinfo.identityNumber}}</span>
                </div>
                <div>
                    <span>车次/班次：</span>
                    <span>{{ tickinfo.trainNumber}}</span>
                </div>
            </div>
            <div class="detailSection">
                <div>
                    <span>出发地：</span>
                    <span>{{ tickinfo.departCity}}</span>
                </div>
                <div>
                    <span>到达地：</span>
                    <span>{{ tickinfo.arriveCity}}</span>
                </div>
                <div>
                    <span>票价：</span>
                    <span>{{ tickinfo.totalAmount}}</span>
                </div>
                <div>
                    <span style="letter-spacing: -1.5px">金额(不含税)：</span>
                    <span>{{ tickinfo.amount}}</span>
                </div>
                <div>
                    <span>税率：</span>
                    <span v-show="tickinfo.taxRate">{{ (tickinfo.taxRate&&tickinfo.taxRate!='0%') ? tickinfo.taxRate : '*'}}</span>
                </div>
                <div>
                    <span>税额：</span>
                    <span v-show="tickinfo.taxRate">{{ (tickinfo.taxRate&&tickinfo.taxRate!='0%') ? (tickinfo.taxAmount?toDecimal2(tickinfo.taxAmount):((tickinfo.taxRate==='免税'||tickinfo.taxRate.indexOf('*')>-1)?'***':'')) : '*' }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// import { toDecimal2 } from './common.js';
import popdata from "./common";
export default {
    mixins: [ popdata ],
    name: 'ticketReal',
    components: {},
    data() {
      return {};
    },
    props: {
        ticktype: {
            type: String,
            default: null
        },
        tickinfo: {
            default: null
        }
    }
};
</script>

<style scoped lang="scss">
#ticketReal {
    * { box-sizing: border-box; margin: 0; padding: 0; }
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #f7f7f7;
    padding-top: 30px;
    .t_content {
        width: 642px;
        height: 356px;
        background: #fff;
        margin: 0 auto;
        position: relative;
        padding-top: 30px;
        overflow: hidden;
    }
    .t_header {
        text-align: center;
        height: 80px;
        margin: 0 auto;
        font-size: 24px;
        color: #9E520A;
        line-height: 80px;
    }
    .t_logo {
        width: 120px;
        height: 80px;
        position: absolute;
        top: 30px;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0.8;
        .yz {
            height: 82px;
        }
    }

    .detailSection {
        padding: 22px 0 22px 40px;
        width: 50%;
        float: left;
        box-sizing: border-box;
        > div {
            line-height: 25px;
            &:not(:nth-last-child(1)) {
                margin-bottom: 8px;
            }
            span {
                font-size: 16px;
                display: inline-block;
                &:nth-child(1) {
                    width: 95px;
                    color: #9E520A;
                }
                &:nth-child(2) {
                    width: calc(100% - 100px);
                    color: #333333;
                }
            }
        }
    }
}
</style>
